<template>
  <div class="content">
    <!-- 大图片 -->
    <!-- <div class="toptu" :style="top_img"></div> -->
    <!-- 标题区域 -->
    <div class="biaoti">
      <div class="biaoti1">popular plan</div>
      <div class="biaoti2">热门方案</div>
    </div>
    <div class="box5">
      <div class="box5_1" v-for="item of solution" :key="item.id">
        <div>{{ item.category_name }}</div>
        <p>{{ item.brief }}</p>
      </div>
    </div>
    <div class="baobox" v-for="item of solution" :key="item.id">
      <!-- 标题区域 -->
      <div class="biaoti">
        <!-- <div class="biaoti1">Great health plan</div> -->
        <div class="biaoti2">{{ item.category_name }}方案</div>
      </div>
      <div class="dajiangkang">
        <h4>{{ item.name }}</h4>
        <p>{{ item.brief }}</p>
        <div class="colorbox">
          <div class="colorbox1">
            <div class="colorbox1_row1">
              <img src="../assets/image/duigou.png" alt="" />
              <span>{{ item.merit_title_one }}</span>
            </div>
            <div class="colorbox1_row2">
              {{ item.merit_content_one }}
            </div>
          </div>
          <div class="colorbox2">
            <div class="colorbox1_row1">
              <img src="../assets/image/shandian.png" alt="" />
              <span>{{ item.merit_title_two }}</span>
            </div>
            <div class="colorbox1_row2">
              {{ item.merit_content_two }}
            </div>
          </div>
          <div class="colorbox3">
            <div class="colorbox1_row1">
              <img src="../assets/image/pingheng.png" alt="" />
              <span>{{ item.merit_title_three }}</span>
            </div>
            <div class="colorbox1_row2">
              {{ item.merit_content_three }}
            </div>
          </div>
        </div>
      </div>
      <div class="kehuanli">客户案例</div>
      <div class="anlibox">
        <div class="anlibox1">
          <div class="anlibox1_left">
            <img :src="item.customer_cover" alt="" />
            <h4>{{ item.customer_name }}</h4>
          </div>
          <div class="anlibox1_right">
            <div class="anlitongdian">客户痛点</div>
            <div class="tongdiandetail">
              <img class="zuoyinhao" src="../assets/image/zuoyinhao.png" alt="" />
              <span>{{ item.customer_pain }}</span>
              <img class="youyinhao" src="../assets/image/youyinhao.png" alt="" />
            </div>
            <div class="anlitongdian">实现价值</div>
            <div class="jiashidetail">
              <img src="../assets/image/ok.png" alt="" />
              <div>
                <span>{{ item.value_one.split('：')[0] }}：</span>
                <span class="lastspan">{{ item.value_one.split('：')[1] }}</span>
              </div>
            </div>
            <div class="jiashidetail">
              <img src="../assets/image/ok.png" alt="" />
              <div>
                <span>{{ item.value_two.split('：')[0] }}：</span>
                <span class="lastspan">{{ item.value_two.split('：')[1] }} </span>
              </div>
            </div>
            <div class="jiashidetail">
              <img src="../assets/image/ok.png" alt="" />
              <div>
                <span>{{ item.value_three.split('：')[0] }}：</span>
                <span class="lastspan">{{ item.value_three.split('：')[1] }} </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 案例结束 -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      top_img: { background: '' },
      solution: []
    }
  },
  mounted() {
    this.getIndexInfo()
  },
  methods: {
    async getIndexInfo() {
      const res = await this.axios.get('/api/bdweb/solution')
      console.log(res.data.data)
      this.top_img.background = `url(${res.data.data.img.top_img})`
      this.solution = res.data.data.solution
    }
  }
}
</script>

<style scoped>
.content {
  width: 1920px;
}
.toptu {
  width: 1920px;
  height: 750px;
  background: no-repeat top left;
  background-size: 100% 100%;
  position: relative;
}

.toptu .title {
  position: absolute;
  top: 287px;
  left: 218px;
  font-size: 50px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  line-height: 30px;
  width: 800px;
}
.toptu p {
  position: absolute;
  top: 373px;
  left: 217px;
  width: 835px;

  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  line-height: 32px;
}
.biaoti {
  height: 300px;
  margin: 0 auto;
  text-align: center;
  line-height: 240px;
  position: relative;
}
.biaoti > .biaoti1 {
  font-size: 60px;
  font-family: Helvetica;
  font-weight: bold;
  color: #cccccc;
  opacity: 0.6;
}
.biaoti > .biaoti2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-size: 60px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 23px;
}
.box5 {
  width: 1600px;
  height: 802px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.box5 > .box5_1 {
  flex: 1;
  min-width: 533px;
  height: 400px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(204, 204, 204, 0.61);
}
.box5_1 > div {
  padding: 50px 0 0 70px;

  font-size: 40px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 23px;
}
.box5_1 > p {
  padding: 40px 53px 52px 70px;
}
.box5_1 > .el-button {
  margin-left: 70px;
  width: 138px;
  height: 54px;
  background: #00baff;
  border-radius: 10px;

  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
}

.dajiangkang {
  width: 1600px;
  margin: 0 auto;
}
.dajiangkang > h4 {
  font-size: 40px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2b2b2b;
}
.dajiangkang > p {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  color: #2b2b2b;
  margin: 46px 0 80px 0;
}
.colorbox {
  width: 1600px;
  display: flex;
  justify-content: space-between;
}
.colorbox1,
.colorbox2,
.colorbox3 {
  width: 480px;
  padding-bottom: 80px;

  box-shadow: 0px 0px 12px 0px rgba(204, 204, 204, 0.61);
}
.colorbox1 {
  background: linear-gradient(90deg, #015eea, #00c0fa);
}
.colorbox2 {
  background: linear-gradient(120deg, #43ea80, #38f8d4);
}
.colorbox3 {
  background: linear-gradient(-60deg, #fedc45, #fb7099);
}
.colorbox1_row1 {
  display: flex;
  align-items: center;
  padding: 18px 0 0 41px;
  box-sizing: border-box;
}
.colorbox1_row1 > span {
  padding-left: 24px;
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 23px;
}
.colorbox1_row2 {
  padding: 22px 38px;
  width: 403px;
  height: 58px;
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 32px;
}
.kehuanli {
  text-align: center;
  font-size: 60px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 23px;
  margin: 136px auto 190px auto;
}
.anlibox {
  width: 1920px;
  height: 580px;
  background: url('../assets/image/anli3.png') no-repeat top left;
  background-size: 100% 100%;
  position: relative;
}
.anliboxkeyan {
  background: url('../assets/image/anli2.png');
}
.anlizhengwu {
  background: url('../assets/image/anli1.png');
}
.anliboxai {
  background: url('../assets/image/anli4.png');
}
.anliboxyun {
  background: url('../assets/image/anli5.png');

  margin-bottom: 132px;
}
.anlibox1 {
  position: absolute;
  top: -113px;
  left: 310px;
  width: 1300px;
  height: 620px;
  display: flex;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(204, 204, 204, 0.61);
  border-radius: 10px;
}
.anlibox1_left {
  width: 400px;
  height: 620px;
  background: #eeeeee;
  border-radius: 10px 0px 0px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.anlibox1_left > img {
  width: 198px;
  height: 198px;
  background: #ffffff;
  border-radius: 50%;
}
.anlibox1_left > h4 {
  font-size: 40px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 23px;
}
.anlibox1_right {
  padding: 59px;
  flex: 1;
}
.anlitongdian {
  font-size: 40px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 23px;
}
.tongdiandetail {
  height: 60px;
  display: flex;
  margin: 35px auto;
  position: relative;
  align-items: center;
  justify-content: center;
}
.tongdiandetail > span {
  padding: 0 45px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  color: #cccccc;
}
.zuoyinhao {
  position: absolute;
  top: 0;
  left: 0;
}
.youyinhao {
  position: absolute;
  bottom: 0;
  right: 0;
}
.jiashidetail {
  display: flex;
  margin: 40px 0 30px 0;
}
.jiashidetail > img {
  width: 30px;
  height: 30px;
}
.jiashidetail > div {
  padding-left: 12px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  color: #2b2b2b;
  line-height: 30px;
}
.jiashidetail .lastspan {
  color: #cccccc;
}
</style>
